import { Card, Pagination, Table, Field, Box, Button, Icon, Message } from '@alifd/next';
import TableEmptyBlock from '@/components/TableEmptyBlock';
import { FormattedMessage } from 'react-intl';
import { useFusionTable } from 'ahooks';
import Filter from './Filter';
import { apiList, apiSync, apiDelete } from '../services';
import { useRequest } from 'ice';

function List() {
  const field = Field.useField([{}]);
  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(apiList, {
    field,
    debounceWait: 300,
  });
  const { submit } = search;
  const { request } = useRequest<any, string[]>(apiSync, {
    manual: true,
    onSuccess: () => {
      Message.success('同步成功');
      refresh();
    },
  });

  const { request: dele } = useRequest<any, number[]>(apiDelete, {
    manual: true,
    onSuccess: () => {
      Message.success('删除成功');
      refresh();
    },
  });

  return (
    <Card.Content>
      <Filter submit={submit} field={field} />
      <Box direction="row" justify="flex-end" align="center" margin={[0, 0, 10, 0]}>
        <Button type="primary" onClick={() => request()}>
          同步
        </Button>
      </Box>
      <Table
        {...tableProps}
        isZebra
        emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
        primaryKey="id"
      >
        <Table.Column dataIndex="clazz" title="类名" asyncResizable />
        <Table.Column dataIndex="name" title="名称" asyncResizable />
        <Table.Column dataIndex="method" title="方法资源" asyncResizable />
        <Table.Column dataIndex="path" title="路径" asyncResizable />
        <Table.Column dataIndex="sysModules" title="系统模块" asyncResizable />
        <Table.Column dataIndex="remark" title="备注" asyncResizable />
        <Table.Column
          dataIndex="shippingId"
          title="操作"
          cell={(val, i, row) => (
            <Button type="primary" text onClick={() => dele(row.id)}>
              删除
            </Button>
          )}
        />
      </Table>
      <Pagination
        style={{ marginTop: 16, textAlign: 'right' }}
        shape="arrow-only"
        totalRender={(total) => <FormattedMessage id="page.total" tagName="div" values={{ total }} />}
        {...paginationProps}
      />
    </Card.Content>
  );
}

export default List;
